<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fetch提交FormData</title>
</head>

<body>
  <h2>fetch提交FormData</h2>
  <!-- 选择图片 -->
  <input type="file" class="ipt">
  <!-- 图片回显 -->
  <img class="icon" src="" alt="">
  <script>
    /**
     * fetch提交FormData
     *  1.如何设置请求方法?
     *  2.如何提交数据?
     * */
    document.querySelector('.ipt').addEventListener('change', async function () {
      const img = this.files[0]
      const data = new FormData()
      data.append('img', img)
      // console.log(img)
      // 1.如何设置请求方法?
      // 2.如何提交数据?
      const res = await fetch('http://hmajax.itheima.net/api/uploadimg', {
        // 请求方法
        method: 'post',
        // 提交的数据
        body: data
      })
      const resData = await res.json()
      console.log(resData)

      // 回显
      document.querySelector('.icon').src = resData.data.url
    })
  </script>
</body>

</html>